<template>
  <!-- 地区列表 -->
  <view class="region-list flex flex-dir-c">
    <!-- 标题 -->
    <!-- 关闭按钮 - X -->
    <!-- <view class="brand-title">
      <u-icon class="icon-close" name="close" :size="34" color="#333333" @click="close()"></u-icon>
      <text>选择地区</text>
    </view> -->
    
    <!-- 列表内容 -->
    <view class="list-content">
      <scroll-view scroll-y scroll-with-animation show-scrollbar :scroll-into-view="addtoView" class="content-list">
        <view class="brandcss" @click="selected('')">
          <view class="alladdress">全部地区</view>
        </view>
        <view v-for="(item, index) in cityList" :id="item.letter" :key="item.letter">
          <view class="abcd">{{ item.letter | letter }}</view>
          <view class="Brandcss">
            <view class="list-cell" v-for="(item1, index1) in item.data" :key="index1">
              <view class="city-text" @tap="selected(item1.id)">
                <view class="area">{{ item1.name }}</view>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
    
    <!-- 字母索引 -->
    <view class="floor flex flex-dir-c flex-jc-sb">
      <view v-for="(item, index) in cityList" :data-id="item.letter" :key="item.id" @tap="addressToView">{{ item.letter | letter }}</view>
    </view>
  </view>
</template>

<script>
  export default {
    name: 'regionList',
    data() {
      return {
        cityList: [],
        addtoView: '',
      }
    },
    
    filters: {
      // 过滤将letter的值Aa ，转为# 进行显示
      letter(str) {
        return str === 'Aa' ? '#' : str
      }
    },
    
    methods: {
      //获取地址列表
      async getCityList() {
        try {
          const { data } = await this.$api.jsonData.regionalCityGroup()
          this.cityList = data.list.map(item => {
            // 将#号改成Aa
            if (item.letter === '#') {
              return { ...item, letter: 'Aa' }
            } else {
              return item
            }
          })
        } catch (e) {
          console.log(e)
        }
      },
      
      // 点击选择了地区
      selected(id) {
        this.$emit('change', id)
        this.$emit('close')
      },
      
      // 地址字母索引定位
      addressToView(event) {
        let id = event.currentTarget.dataset.id
        this.addtoView = id
      },
      
      // 关闭当前列表
      close() {
        this.$emit('close')
      },
    },
    
    created() {
      this.getCityList()
    }
  }
</script>

<style lang="scss" scoped>
  .region-list {
    height: 100%;
    background-color: #fff;
    position: relative;
    
    .brand-title {
      padding: 26rpx 0;
      background-color: #fff;
      font-size: 36rpx;
      font-weight: 500;
      color: #333333;
      text-align: center;
      position: relative;
    
      .icon-close {
        position: absolute;
        top: 50%;
        left: 20rpx;
        transform: translateY(-50%);
      }
    }
  }
  // 列表内容
  .list-content {
    height: 100%;
    overflow: hidden;
    .content-list {
      width: 100%;
      height: 100%;
    }
  }
  
  //全部地区
  .addList {
    line-height: 100rpx;
    background-color: #fff;
    border: 2rox solid red;
  }
  
  .abcd {
    text-indent: 25rpx;
    background-color: #eeeeee;
    line-height: 60rpx;
  }
  .city-text {
    padding: 32rpx 45rpx;
    border-top: 1px solid #eee;
  }
  
  .alladdress {
    padding: 32rpx 45rpx;
    font-size: 30rpx;
    font-weight: bold;
    color: #333333;
  }
  
  // 字母索引
  .floor {
    position: absolute;
    top: 100rpx;
    right: 4rpx;
    width: 44rpx;
    // height: 75%;
    line-height: 28rpx;
    text-align: center;
    font-size: 20rpx;
    font-weight: bold;
    color: #fbb000;
  }
</style>
